<template>
<div class="activity-body">
  <div class="activity-ad">
  </div>
  <div class="activity-wrap">
    <div class="rule-box hotsale">
      <div class="rule-title">热卖商品</div>
      <div class="rule-content">
        <div class="hotsale_box">
          <template v-for="(hotItem, modelIndex) in hotsaleList">
            <modelProductNewYear :Item="hotItem" :isTop="true" :Index="modelIndex" />
          </template>
        </div>
      </div>
    </div>
    <div class="rule-box">
      <div class="rule-title">一月存优刃初六享折扣活动规则</div>
      <div class="rule-content">
        <p class="p2">1、活动时间：2020年3月16日至3月20日</p>
        <p class="p2">2、预存100元优刃货款，可在活动期间享受全场直下2个点优惠</p>
        <p class="p2">3、预存1000元优刃货款，可在活动期间享受全场直下3个点优惠</p>
        <p class="p2">4、预存10000元优刃货款，可在活动期间享受全场直下4个点优惠</p>
        <p class="p2">5、优刃货款预存时间为2020年3月16日至3月20日</p>
        <p class="p2">本活动解释权归刀具联盟所有</p>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import { activityGoods } from '@/service/get-data'
import modelProductNewYear from './modelProductNewYear/index'

export default {
  name: 'ActivityNewYear',
  components: {
    modelProductNewYear
  },
  computed: {
  },
  data () {
    return {
      hotsaleList: []
    }
  },
  methods: {
    // 活动商品
    async activityGoods () {
      const res = await activityGoods()
      this.hotsaleList = res.data.data
    }
  },
  mounted () {
    this.activityGoods()
  },
  filters: {
  },
  watch: {
  }
}
</script>

<style lang="scss" scoped>
.activity-body{
  background-color: #ffe1e1;
  padding-bottom: 30px;
}
.activity-ad{
  width: 100%;
  height: 520px;
  background-image: url("./img/banner.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}
.activity-wrap{
  width: 1190px;
  margin: 0 auto;
  .rule-box{
    margin-top: 30px;
    border-radius: 6px;
    overflow: hidden;
    .hotsale_box{
      .model_box{
        margin-left: 10px;
        display: inline-block;
        &:nth-of-type(6n),&:first-of-type{
          margin-left: 0;
        }
      }
    }
    .rule-title{
      height: 60px;
      line-height: 60px;
      background-color: #E33939;
      color: #fff;
      box-sizing: border-box;
      padding-left: 30px;
    }
    .rule-content{
      width: 100%;
      box-sizing: border-box;
      padding: 30px;
      display: inline-block;
      background-color: #fff;
      font-size: 14px;
      .p-title{
        display: inline-block;
        vertical-align: top;
        line-height: 30px;
        color: #666666;
      }
      .p-content{
        display: inline-block;
        line-height: 30px;
      }
      .p2{
        color: #666666;
        line-height: 30px;
        span{
          color:#333333;
        }
      }
    }
    &.hotsale{
      .rule-content{
        padding: 30px 0;
      }
    }
  }
}

</style>
